<template>
	<div style="height:100%;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav" @click="goBack"></a>
			<h1 class="mui-title">作息时间表</h1>
		</header>
		<div class="mui-content" style="background: #FFFFFF;overflow:auto;">
			<table>
				<thead>
					<tr>
						<td colspan="2" style="width: 50%;">节次</td>
						<td style="width: 50%;">时间</td>
					</tr>
				</thead>
				<tbody>
					<template v-for="trList in tableList">
						<tr v-for="list,index in trList.Titles">
							<td :rowspan="trList.Titles.length" v-if="index == 0">{{ list.Period }}</td>
							<td>{{list.Name}}</td>
							<td>{{list.Date}}</td>
						</tr>
					</template>
					<tr v-if="showExplain">
						<td colspan="3" v-html="remark" style="text-align: left;padding: 20px;"></td>
					</tr>
					<tr v-if="showExplain">
						<td colspan="3" v-text="date" style="text-align: right;padding: 5px;"></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</template>
<script>
	import {
		schedule
	} from '@/service/getData'
	export default {
		data() {
				return {
					remark: "",
					date: "",
					tableList: [],
					showExplain: false
				}
			},
			created() {
				let self = this;
				self.schoolId = self.$route.params.schoolId;
				schedule({
					schoolId: self.schoolId
				}).then((res) => {
					//			 	debugger
					if(res.data != null) {
						self.showExplain = true;
						self.remark = res.data.Remark;
						self.date = res.data.EnableDate;
						self.tableList = res.data.Periods;
					}
				});
			}
	}
</script>
<style scoped>
	table {
		width: 100%;
		/*height: 100%;*/
		text-align: center;
		font-size: 14px;
		border-collapse: collapse;
		border: none;
	}
	
	td {
		height: 35px;
		border: 1px solid #DDDDDD;
	}
</style>